<!-- ？？？ -->
<template>
  <div id="myExam">
    <div class="title">浏览简答题</div>
    <div class="wrapper">
      <ul class="top">
        <li>
          <i class="el-icon-a-041" style="font-size: 20px;"> 题目列表</i>
        </li>
        <el-dialog title="答题板" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="考试题目">
              <el-input v-html="form.title" :readonly="true"></el-input>
            </el-form-item>
            <el-form-item label="作答内容">
              <el-input type="textarea" v-model="form.text" :rows="10"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="onSubmit()">提 交</el-button>
          </div>
          <div v-if="showDisplay">
            <!-- 这里放置你要展示的内容 -->
            <el-card class="box-card">
              <br>分数：{{ score }}<br>
              <br>答案：<br>
              <div v-html="form.answer"></div>
              <br>解析：<br>
              <div v-html="form.analysis"></div>
            </el-card>
          </div>
        </el-dialog>
        <li>
          <p>科目：</p>
          <el-select v-model="subject" clearable placeholder="请选择" class="small-select">
            <el-option
                v-for="item in subOptions"
                :key="item.value"
                :label="item.value"
                :value="item.value">
            </el-option>
          </el-select>
        </li>
        <li>
          <el-input v-model="input" placeholder="请输入内容" style="width: 300px"></el-input>
        </li>
        <li>
          <el-button type="primary" @click="searchQuestion()" icon="el-icon-magic-stick">搜索试题</el-button>
        </li>
      </ul>

      <ul class="paper" v-loading="loading">
        <li @click="toExamMsg(item)" class="item" v-for="(item, index) in records" :key="index">
          <h4>{{ item.subject }}</h4>
          <p v-html="item.question"></p>
          <p class="name" v-html="item.analysis">分析内容-</p>
          <div class="info">
            <i class="el-icon-time"></i><span>{{ item.updateTime.substr(0, 10) }}</span>
          </div>
        </li>
      </ul>
      <div class="pagination">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[2, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>

    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      input: '',
      pageNum:1,
      pageSize:2,
      total:0,
      records:[],

      subject: '',
      subOptions: [
        {value: '地理'},
        {value: '历史'},
        {value: '英语'},
        {value: '语文'},
      ],
      difficulty: '',
      difOptions: [
        {value: '简单'},
        {value: '中等'},
        {value: '困难'},
      ],
      count: '',
      percentage: 0,
      showList: false,
      //添加弹框
      dialogFormVisible: false,
      form: {
        id: null,//试卷id
        answer: '',
        text: '',
        title: '',
        analysis: '',
      },
      formLabelWidth: '120px',
      isRecording: false,
      mediaRecorder: null,
      chunks: [],
      showDisplay: false,
      score: null,
    }
  },
  created() {
    this.getAiQuestionInfo();
    this.loading = true;
  },

  methods: {
    searchQuestion(){
      this.loading = true;
      this.getAiQuestionInfo();
    },
    //改变当前记录条数
    handleSizeChange(val) {
      this.pageSize = val
      this.loading=true
      this.getAiQuestionInfo()
    },
    //改变当前页码，重新发送请求
    handleCurrentChange(val) {
      this.pageNum = val
      this.loading=true
      this.getAiQuestionInfo()
    },
    //获取问题
    getAiQuestionInfo() {
      const queryParams = new URLSearchParams({
        userId: this.$cookies.get("cid"),
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        subject: "地理",
        desc: this.input
      });
      const url = `http://localhost:8081/history-question-by-ai/page?${queryParams}`;
      fetch(url, {
        method: 'GET',
        headers: {
          'Content-Type': 'application/json'
        }
      })
          .then((res) => {
            // 检查响应是否成功
            if (!res.ok) {
              throw new Error(`HTTP error! status: ${res.status}`);
            }
            return res.json();
          })
          .then((data) => {
            this.records = data.data.list;
            this.total=data.data.total
            this.loading = false;
          })
          .catch((error) => {
            console.error('Fetch Error:', error);
          });
    },
    //跳转到试卷详情页
    toExamMsg(exam) {
      this.form.id = exam.id;
      this.form.analysis = exam.analysis;
      this.form.answer = exam.answer;
      this.form.title = exam.question;
      this.dialogFormVisible = true;
    },
    onSubmit() {
      this.sendExam();
      // 提交表单后显示展示栏
      this.showDisplay = true;
    },
    async sendExam() {
      try {
        // 准备发送的数据
        const dataToSend = {
          id: this.form.id,
          myAnswer: this.form.text, // 表单
        };
        // 发送 GET 请求到端口 8081
        const response = await fetch('http://localhost:8081/history-question-by-ai?id=' + dataToSend.id + '&myAnswer=' + encodeURIComponent(dataToSend.myAnswer), {
          method: 'GET', // 注意这里改为 GET 请求
          headers: {
            'Content-Type': 'application/json'
          }
        });
        // 解析服务器返回的响应数据
        const data = await response.json();

        console.log('从服务器接收到的信息：', data.data.score);//接收data
        this.score = data.data.score;

      } catch (error) {
        console.error('发送请求时出错：', error);
      }
    },
    increasePercentage() {
      const intervalId = setInterval(() => {
        if (this.percentage < 99) {
          this.percentage += 1;
        } else {
          clearInterval(intervalId);
        }
      }, 200);
    },
    async sendDataToServer() {
      try {
        // 准备发送的数据
        const dataToSend = {
          subject: this.subject,
          difficulty: this.difficulty,
          count: this.count
        };
        // 发送 POST 请求到端口 8081
        const response = await fetch('http://localhost:8081/history-question-by-ai', {
          method: 'POST', // 注意这里改为 POST 请求
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(dataToSend)
        });

        // 解析服务器返回的响应数据
        const data = await response.json();

        console.log('从服务器接收到的信息：', data);
        if (data != null) {
          this.percentage = 100;
          this.showList = true;
          this.pagination = data.data;
        }
      } catch (error) {
        // 处理错误
        console.error('发送数据时出错：', error);
      }
    },


  }
}
</script>


<style lang="less" scoped>

.pagination {
  padding: 20px 0px 30px 0px;

  .el-pagination {
    display: flex;
    justify-content: center;
  }
}

.paper {
  h4 {
    cursor: pointer;
  }
}

.paper .item a {
  color: #000;
}

.wrapper .top .order {
  cursor: pointer;
}

.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}

.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}

.item .info i {
  margin-right: 5px;
  color: #0195ff;
}

.item .info span {
  margin-right: 14px;
}

.paper .item {
  width: 380px;
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
  transition: all 0.6s ease;
}

.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45);
  transform: scale(1.03);
}

.paper .item .info {
  font-size: 14px;
  color: #88949b;
}

.paper .item .name {
  font-size: 14px;
  color: #88949b;
}

.paper * {
  margin: 20px 0;
}

.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}

.top .icon {
  position: relative;
}

.wrapper .top {
  border-bottom: 1px solid #eee;
  margin-bottom: 20px;
}

#myExam .search-li {
  margin-left: auto;
}

.top .search-li {
  margin-left: auto;
}

.top li {
  display: flex;
  align-items: center;
}

.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}

.wrapper .top {
  display: flex;
}

.wrapper .top li {
  margin: 20px;
}

#myExam {
  width: 980px;
  margin: 0 auto;
}

#myExam .title {
  margin: 20px;
}

#myExam .wrapper {
  background-color: #fff;
}

.wrapper .top .order {
  cursor: pointer;
}

.wrapper .top .order:hover {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}

.wrapper .top .order:visited {
  color: #0195ff;
  border-bottom: 2px solid #0195ff;
}

.item .info i {
  margin-right: 5px;
  color: #0195ff;
}

.item .info span {
  margin-right: 14px;
}

.paper .item {
  border-radius: 4px;
  padding: 20px 30px;
  border: 1px solid #eee;
  box-shadow: 0 0 4px 2px rgba(217, 222, 234, 0.3);
  transition: all 0.6s ease;
}

.item {
  cursor: pointer;
}

.paper .item:hover {
  box-shadow: 0 0 4px 2px rgba(140, 193, 248, 0.45)
}

.paper .item .info {
  font-size: 14px;
  color: #88949b;
}

.paper .item .name {
  font-size: 14px;
  color: #88949b;
}

.paper * {
  margin: 20px 0;
}

.wrapper .paper {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.top .el-icon-search {
  position: absolute;
  right: 10px;
  top: 10px;
}

.top .icon {
  position: relative;
}

.wrapper .top {
  border-bottom: 1px solid #eee;
}

#myExam .search-li {
  margin-left: auto;
}

.top .search-li {
  margin-left: auto;
}

.top li {
  display: flex;
  align-items: center;
}

.top .search {
  margin-left: auto;
  padding: 10px;
  border-radius: 4px;
  border: 1px solid #eee;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.top .search:hover {
  color: #0195ff;
  border-color: #0195ff;
}

.wrapper .top {
  display: flex;
}

.wrapper .top li {
  margin: 20px;
}

#myExam {
  width: 980px;
  margin: 0 auto;
}

#myExam .title {
  margin: 20px;
}

#myExam .wrapper {
  background-color: #fff;
}

.small-select {
  width: 120px; /* 设置宽度 */
  height: 32px !important; /* 设置高度 不起作用？ */
}

.container {
  display: flex;
  justify-content: center;
}

.centered-content {
  width: 80%;
  text-align: center;
}
.container em {
  font-style: italic;
}
</style>
